<template>
  <div class="main">
    <el-row :gutter="10">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="!single"
          @click="handleUpdate"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="Delete"
          :disabled="!single"
          @click="handleDelete"
          >删除</el-button
        >
      </el-col>
    </el-row>
    <br />
    <el-row>
      <el-table :data="categoryList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          prop="categoryId"
          label="类别编号"
          align="center"
          width="100"
        />
        <el-table-column prop="categoryName" label="类别名称" align="center" />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
            <el-button
              link
              type="primary"
              icon="Edit"
              size="small"
              @click="handleUpdate(scope.row)"
              >修改</el-button
            >
            <el-button
              link
              type="primary"
              icon="Delete"
              size="small"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog v-model="dialogOpen" :title="title" width="500">
      <CategoryForm
        :action="action"
        :categoryId="categoryId"
        @close="handleCloseDialog"
      />
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onMounted } from "vue";
import CategoryForm from "@/views/pos/category/form.vue";
import { listAllCategory } from "@/api/category";
import type { CategoryDTO } from "@/api/category";
// 页面加载时，得到列表数据
onMounted(() => {
  getList();
});

/** ------------------数据展示区：数据表格-------------------- */

// 去掉静态数据
const categoryList = ref<CategoryDTO[]>([]);
/** 得到列表数据 */
function getList() {
  listAllCategory().then(response => {
    categoryList.value = response.data;
  });
}

/** ------------------数据展示区：数据选择-------------------- */

const ids = ref<number[]>([]); // 表单勾选的id
const single = ref<boolean>(false); // 勾选1个
const multiple = ref<boolean>(false); // 勾选多个

// 数据展示区--> 勾选数据
function handleSelectionChange(selection: CategoryDTO[]) {
  ids.value = selection.map((item: CategoryDTO) => item.categoryId);
  single.value = selection.length == 1;
  multiple.value = selection.length >= 1;
}

/** ------------------数据操作-------------------- */
const dialogOpen = ref<boolean>(false);
const title = ref<string>("");
const categoryId = ref<number>();
const action = ref<string>();

/** 新增按钮 */
function handleAdd() {
  title.value = "新增类别";
  action.value = "add";
  dialogOpen.value = true;
}

/** 修改按钮 */
function handleUpdate(row: any) {
  categoryId.value = row.categoryId || ids.value[0];
  title.value = "修改类别【" + categoryId.value + "】";
  action.value = "update";
  dialogOpen.value = true;
}

/** 删除按钮 */
function handleDelete(row: any) {
  categoryId.value = row.categoryId || ids.value[0];
  title.value = "删除类别【" + categoryId.value + "】";
  action.value = "delete";
  dialogOpen.value = true;
}

/** 关闭对话框 */
function handleCloseDialog() {
  dialogOpen.value = false;
  categoryId.value = undefined;
  action.value = undefined;
  getList();
}
</script>
